<template>
  <div id="files">
    <el-form class="files" :model="uploadForm" :rules="upload" inline label-width="170px">
      <el-form-item label="存储方式" prop="storage">
        <el-radio-group v-model="uploadForm.storage" @change="chooseStorage">
          <el-radio label="local">本地存储</el-radio>
          <el-radio label="aliyun">阿里云oss</el-radio>
          <el-radio label="qiniu">七牛云oss</el-radio>
          <el-radio label="tencent">腾讯云oss</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="flex">
        <el-form-item label="文件大小、格式设置" prop="file_size">
          <el-input v-model="uploadForm.file_size" class="left" placeholder="请输入文件大小" />
        </el-form-item>
        <el-form-item prop="file_ext">
          <el-input v-model="uploadForm.file_ext" class="right" placeholder="请输入文件类型" />
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="图片大小、格式设置" prop="image_size">
          <el-input v-model="uploadForm.image_size" class="left" placeholder="请输入图片大小" />
        </el-form-item>
        <el-form-item prop="image_ext">
          <el-input v-model="uploadForm.image_ext" required class="right" placeholder="请输入图片格式" />
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="视频大小、类型设置" prop="video_size">
          <el-input v-model="uploadForm.video_size" class="left" placeholder="请输入视频大小" />
        </el-form-item>
        <el-form-item prop="video_ext">
          <el-input v-model="uploadForm.video_ext" class="right" placeholder="请输入视频类型" />
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="音频大小、类型设置" prop="audio_size">
          <el-input v-model="uploadForm.audio_size" class="left" placeholder="请输入音频大小" />
        </el-form-item>
        <el-form-item prop="audio_ext">
          <el-input v-model="uploadForm.audio_ext" class="right" placeholder="请输入音频类型" />
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="压缩包大小、类型设置" prop="zip_size">
          <el-input v-model="uploadForm.zip_size" class="left" placeholder="请输入压缩包大小" />
        </el-form-item>
        <el-form-item prop="zip_ext">
          <el-input v-model="uploadForm.zip_ext" class="right" placeholder="请输入压缩包类型" />
        </el-form-item>
      </div>
      <div v-if="uploadForm.storage == 'tencent'" class="upload">
        <el-form-item label="接收秘钥ID" prop="tencent_accessKeyId">
          <el-input v-model="uploadForm.tencent_accessKeyId" type="password" />
        </el-form-item>
        <el-form-item label="接收秘钥密码" prop="tencent_accessKeySecret">
          <el-input v-model="uploadForm.tencent_accessKeySecret" type="password" />
        </el-form-item>
        <el-form-item label="地区" prop="tencent_region">
          <el-input v-model="uploadForm.tencent_region" />
        </el-form-item>
        <el-form-item label="协议头" prop="tencent_protocolHeader">
          <el-input v-model="uploadForm.tencent_protocolHeader" />
        </el-form-item>
        <el-form-item label="容器名" prop="tencent_bucket">
          <el-input v-model="uploadForm.tencent_bucket" />
        </el-form-item>
      </div>
      <div v-if="uploadForm.storage == 'aliyun'" class="upload">
        <el-form-item label="接收秘钥ID" prop="aliyun_accessKeyId">
          <el-input v-model="uploadForm.aliyun_accessKeyId" type="password" />
        </el-form-item>
        <el-form-item label="接收秘钥密码" prop="aliyun_accessKeySecret">
          <el-input v-model="uploadForm.aliyun_accessKeySecret" type="password" />
        </el-form-item>
        <el-form-item label="根地址" prop="aliyun_storageRoot">
          <el-input v-model="uploadForm.aliyun_storageRoot" />
        </el-form-item>
        <el-form-item label="容器名" prop="aliyun_bucket">
          <el-input v-model="uploadForm.aliyun_bucket" />
        </el-form-item>
      </div>
      <div v-if="uploadForm.storage == 'qiniu'" class="upload">
        <el-form-item label="接收秘钥ID" prop="qiniu_accessKeyId">
          <el-input v-model="uploadForm.qiniu_accessKeyId" type="password" />
        </el-form-item>
        <el-form-item label="接收秘钥密码" prop="qiniu_accessKeySecret">
          <el-input v-model="uploadForm.qiniu_accessKeySecret" type="password" />
        </el-form-item>
        <el-form-item label="根地址" prop="qiniu_storageRoot">
          <el-input v-model="uploadForm.qiniu_storageRoot" />
        </el-form-item>
        <el-form-item label="容器名" prop="qiniu_bucket">
          <el-input v-model="uploadForm.qiniu_bucket" />
        </el-form-item>
      </div>

      <el-form-item label=" ">
        <el-button class="save" type="primary" @click="saveUpload">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import systemApi from '@/api/system/system.js'
export default {
  props: ['data'],
  data() {
    return {
      filesData: '',
      // options: '',
      form_title: '',
      uploadType: '',
      group: '',
      uploadForm: {
        group: this.data.group,
        storage: '',
        file_size: '',
        file_ext: '',
        image_size: '',
        image_ext: '',
        video_size: '',
        video_ext: '',
        audio_size: '',
        audio_ext: '',
        zip_size: '',
        zip_ext: '',
        tencent_accessKeyId: '',
        tencent_accessKeySecret: '',
        tencent_region: '',
        tencent_protocolHeader: '',
        tencent_bucket: '',
        // 阿里云
        aliyun_storageRoot: '',
        aliyun_accessKeyId: '',
        aliyun_accessKeySecret: '',
        aliyun_bucket: '',
        // 七牛云
        qiniu_storageRoot: '',
        qiniu_bucket: '',
        qiniu_protocolHeader: '',
        qiniu_accessKeySecret: '',
        qiniu_accessKeyId: ''
      },
      tecentData: [], // 腾讯云数据
      aliData: [], // 阿里云数据
      qiniuData: [], // 七牛云数据
      upload: {
        storage: [
          { required: 'true', message: '请选择存储方式', trigger: 'change' }
        ],
        file_size: [
          { required: 'true', message: '请输入文件大小', trigger: 'blur' }
        ],
        file_ext: [
          { required: 'true', message: '请输入文件类型', trigger: 'blur' }
        ],
        image_size: [
          { required: 'true', message: '请输入图片大小', trigger: 'blur' }
        ],
        image_ext: [
          { required: 'true', message: '请输入图片格式', trigger: 'blur' }
        ],
        video_size: [
          { required: 'true', message: '请输入视频大小', trigger: 'blur' }
        ],
        video_ext: [
          { required: 'true', message: '请输入视频类型', trigger: 'blur' }
        ],
        audio_size: [
          { required: 'true', message: '请输入音频大小', trigger: 'blur' }
        ],
        audio_ext: [
          { required: 'true', message: '请输入音频类型', trigger: 'blur' }
        ],
        zip_size: [
          { required: 'true', message: '请输入压缩包大小', trigger: 'blur' }
        ],
        zip_ext: [
          { required: 'true', message: '请输入压缩包类型', trigger: 'blur' }
        ],
        tencent_accessKeyId: [
          { required: 'true', message: '请输入接收秘钥ID', trigger: 'blur' }
        ],
        tencent_accessKeySecret: [
          { required: 'true', message: '请输入接收秘钥密码', trigger: 'blur' }
        ],
        tencent_region: [
          { required: 'true', message: '请输入地区', trigger: 'blur' }
        ],
        tencent_protocolHeader: [
          { required: 'true', message: '请输入协议头', trigger: 'blur' }
        ],
        tencent_bucket: [
          { required: 'true', message: '请输入容器名', trigger: 'blur' }
        ],
        aliyun_accessKeyId: [
          { required: 'true', message: '请输入接收秘钥ID', trigger: 'blur' }
        ],
        aliyun_accessKeySecret: [
          { required: 'true', message: '请输入接收秘钥密码', trigger: 'blur' }
        ],
        aliyun_storageRoot: [
          { required: 'true', message: '请输入根地址', trigger: 'blur' }
        ],
        aliyun_bucket: [
          { required: 'true', message: '请输入容器名', trigger: 'blur' }
        ],
        qiniu_accessKeyId: [
          { required: 'true', message: '请输入接收秘钥ID', trigger: 'blur' }
        ],
        qiniu_accessKeySecret: [
          { required: 'true', message: '请输入接收秘钥密码', trigger: 'blur' }
        ],
        qiniu_storageRoot: [
          { required: 'true', message: '请输入根地址', trigger: 'blur' }
        ],
        qiniu_bucket: [
          { required: 'true', message: '请输入容器名', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.filesData = this.data.children
    this.data.children[0].children.forEach(item => {
      if (item.id == 59) {
        this.tecentData = item.children
      } else if (item.id == 15) {
        this.aliData = item.children
      } else if (item.id == 16) {
        this.qiniuData = item.children
      }
    })
    // this.tecentData = this.data.children[0].children[0].children
    // this.aliData = this.data.children[0].children[2].children
    // this.qiniuData = this.data.children[0].children[3].children
    this.group = this.data.group
    this.filesData.forEach(el => {
      this.uploadForm[el.title] = el.value
    })
    this.tecentData.forEach(el => {
      this.uploadForm[el.title] = el.value
    })
    this.aliData.forEach(el => {
      this.uploadForm[el.title] = el.value
    })
    this.qiniuData.forEach(el => {
      this.uploadForm[el.title] = el.value
    })
    // this.options = this.data.children[0].children
  },
  methods: {
    chooseStorage(val) {

    },
    saveUpload() {
      let val = {

      }
      if (this.uploadForm.storage == 'tencent') {
        val = {
          group: this.data.group,
          storage: this.uploadForm.storage,
          file_size: this.uploadForm.file_size,
          file_ext: this.uploadForm.file_ext,
          image_size: this.uploadForm.image_size,
          image_ext: this.uploadForm.image_ext,
          video_size: this.uploadForm.video_size,
          video_ext: this.uploadForm.video_ext,
          audio_size: this.uploadForm.audio_size,
          audio_ext: this.uploadForm.audio_ext,
          zip_size: this.uploadForm.zip_size,
          zip_ext: this.uploadForm.zip_ext,
          tencent_accessKeyId: this.uploadForm.tencent_accessKeyId,
          tencent_accessKeySecret: this.uploadForm.tencent_accessKeySecret,
          tencent_region: this.uploadForm.tencent_region,
          tencent_protocolHeader: this.uploadForm.tencent_protocolHeader,
          tencent_bucket: this.uploadForm.tencent_bucket
        }
      } else if (this.uploadForm.storage == 'aliyun') {
        val = {
          group: this.data.group,
          storage: this.uploadForm.storage,
          file_size: this.uploadForm.file_size,
          file_ext: this.uploadForm.file_ext,
          image_size: this.uploadForm.image_size,
          image_ext: this.uploadForm.image_ext,
          video_size: this.uploadForm.video_size,
          video_ext: this.uploadForm.video_ext,
          audio_size: this.uploadForm.audio_size,
          audio_ext: this.uploadForm.audio_ext,
          zip_size: this.uploadForm.zip_size,
          zip_ext: this.uploadForm.zip_ext,
          aliyun_storageRoot: this.uploadForm.aliyun_storageRoot,
          aliyun_accessKeyId: this.uploadForm.aliyun_accessKeyId,
          aliyun_accessKeySecret: this.uploadForm.aliyun_accessKeySecret,
          aliyun_bucket: this.uploadForm.aliyun_bucket
        }
      } else if (this.uploadForm.storage == 'qiniu') {
        val = {
          group: this.data.group,
          storage: this.uploadForm.storage,
          file_size: this.uploadForm.file_size,
          file_ext: this.uploadForm.file_ext,
          image_size: this.uploadForm.image_size,
          image_ext: this.uploadForm.image_ext,
          video_size: this.uploadForm.video_size,
          video_ext: this.uploadForm.video_ext,
          audio_size: this.uploadForm.audio_size,
          audio_ext: this.uploadForm.audio_ext,
          zip_size: this.uploadForm.zip_size,
          zip_ext: this.uploadForm.zip_ext,
          qiniu_storageRoot: this.uploadForm.qiniu_storageRoot,
          qiniu_bucket: this.uploadForm.qiniu_bucket,
          qiniu_protocolHeader: this.uploadForm.uploadForm.qiniu_protocolHeader,
          qiniu_accessKeySecret: this.uploadForm.qiniu_accessKeySecret,
          qiniu_accessKeyId: this.uploadForm.qiniu_accessKeyId
        }
      } else {
        val = {
          group: this.data.group,
          storage: this.uploadForm.storage,
          file_size: this.uploadForm.file_size,
          file_ext: this.uploadForm.file_ext,
          image_size: this.uploadForm.image_size,
          image_ext: this.uploadForm.image_ext,
          video_size: this.uploadForm.video_size,
          video_ext: this.uploadForm.video_ext,
          audio_size: this.uploadForm.audio_size,
          audio_ext: this.uploadForm.audio_ext,
          zip_size: this.uploadForm.zip_size,
          zip_ext: this.uploadForm.zip_ext
        }
      }

      systemApi.sysUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    }

  }
}
</script>

<style lang='scss'>
#files{
  .files.el-form--inline .el-form-item__content{
    width: calc(100% - 170px);
    .el-input.left{
      width: calc(100% );

    }
    .el-input.right{
      width: calc(100% )
    }
  }
  .files.el-form--inline .upload .el-form-item__content{
    width: calc(100% - 350px);
  }
}
</style>
<style scoped>
.flex{
  display: flex;
  justify-content: space-between;
}
</style>
